<template>
  <div id="personal-advanced">
    <div class="advanced-box">
      <NavBar title="高级认证" left-arrow @click-left="onClickLeft" />
      <div class="advanced-body">
        <Form @submit="onSubmit">
          <Field
            label="证件类型："
            v-model="typeid"
            name="证件类型"
            placeholder="请选择证件类型"
            @click="showPicker = true"
          />
          <Popup v-model="showPicker" round position="bottom">
            <Picker
              show-toolbar
              :columns="columns"
              @cancel="showPicker = false"
              @confirm="onConfirm"
              :rules="[{ required: true, message: '请选择证件类型' }]"
            />
          </Popup>
          <Field
            v-model="username"
            name="姓名"
            label="姓名："
            placeholder="请输入姓名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />

          <Field name="uploader" label="证件照：">
            <template #input>
              <div class="upload">
                <div class="upload-top">
                  <uploader v-model="uploader" />
                </div>
                <span>证件正面照片</span>
                <div class="upload-bottom">
                  <uploader v-model="uploader2" />
                </div>
                <span>证件反面照片</span>
              </div>
            </template>
          </Field>

          <div class="btn">
            <Button round block type="info" native-type="submit">提交</Button>
          </div>
        </Form>

        <div class="hint">
          <p>
            提交身份证正反面
            、手持人脸识别必要清晰、照片符合标准JPG格式。系统采用旷视“人证合一”避免了用户身份信息被盗用等人工干预的情况，平台务必保管用户交易账户资金的安全性。温馨提示：
          </p>
          <p>1.在验证期间请确保网络通畅</p>
          <p>2.确保不会被安全软件拦截</p>
          <p>3.同步手机时间，确保时间与当地时区一致</p>
          <p>4.请勿佩戴眼镜、帽子</p>
          <p>5.请在光线充足的环境进行验证</p>
          <p>6.使用手机验证请关闭手机的美颜、修图等功能</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  NavBar,
  Picker,
  Field,
  Popup,
  Form,
  Button,
  Toast,
  uploader,
} from "vant";
export default {
  components: {
    NavBar,
    Picker,
    Field,
    Popup,
    Form,
    Button,
    Toast,
    uploader,
  },

  data() {
    return {
      typeid: "", // 证件类型
      username: "", // 姓名
      showPicker: false, // 选择证件类型
      columns: ["身份证", "护照", "驾照"], // 证件类型
      uploader: [], // 身份证正面
      uploader2: [], // 身份证反面
    };
  },

  methods: {
    // 方法

    // 展开选择证件类型
    onConfirm(typeid) {
      this.typeid = typeid;
      this.showPicker = false;
    },

    // 提交
    onSubmit(values) {
      // 必填校验
      if (!this.typeid) {
        Toast("请选择证件类型！");
        return false;
      }
      console.log("submit", values);
    },

    // 跳出
    onClickLeft() {
      console.log("跳出");
      this.$router.go(-1);
    },

    // 网络请求
  },
};
</script>
<style lang="less" scoped>
#personal-advanced {
  width: 100%;
  height: 100vh;
  background-color: #f7f6fb;
  .advanced-box {
    .advanced-body {
      margin: auto;
      .upload {
        flex-direction: column;
      }
      .btn {
        width: 350px;
        margin: 16px auto;
      }
      .hint {
        font-size: 12px;
        padding: 10px 15px;
        margin-bottom: 0px;
        background-color: #f7f6f8;
        color: #303133;
        line-height: inherit;
      }
    }
  }
}
</style>